<template>
  <view class="about-container">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-back" @tap="goBack">
        <text class="iconfont icon-back">←</text>
      </view>
      <view class="navbar-content">
        <text class="navbar-title">关于应用</text>
      </view>
      <view class="navbar-placeholder"></view>
    </view>

    <!-- 应用信息 -->
    <view class="app-info">
      <view class="app-logo">
        <image class="logo-image" src="/static/images/logo.png" mode="aspectFit"></image>
      </view>
      <text class="app-name">情绪大师</text>
      <text class="app-slogan">你的情绪管理专家</text>
      <text class="app-version">版本 {{ appVersion }}</text>
    </view>

    <!-- 功能介绍 -->
    <view class="features-section">
      <text class="section-title">核心功能</text>
      <view class="features-grid">
        <view class="feature-item" v-for="feature in features" :key="feature.id">
          <view class="feature-icon">
            <text class="icon-text">{{ feature.icon }}</text>
          </view>
          <text class="feature-title">{{ feature.title }}</text>
          <text class="feature-desc">{{ feature.description }}</text>
        </view>
      </view>
    </view>

    <!-- 应用特色 -->
    <view class="highlights-section">
      <text class="section-title">应用特色</text>
      <view class="highlights-list">
        <view class="highlight-item" v-for="highlight in highlights" :key="highlight.id">
          <view class="highlight-icon">
            <text class="icon-text">{{ highlight.icon }}</text>
          </view>
          <view class="highlight-content">
            <text class="highlight-title">{{ highlight.title }}</text>
            <text class="highlight-desc">{{ highlight.description }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 开发团队 -->
    <view class="team-section">
      <text class="section-title">开发团队</text>
      <view class="team-info">
        <view class="team-member">
          <view class="member-avatar">
            <text class="avatar-text">C</text>
          </view>
          <view class="member-info">
            <text class="member-name">Cole</text>
            <text class="member-role">产品设计师 & 开发者</text>
          </view>
        </view>
        <text class="team-desc">致力于为用户提供专业、温暖的情绪管理体验</text>
      </view>
    </view>

    <!-- 技术栈 -->
    <view class="tech-section">
      <text class="section-title">技术栈</text>
      <view class="tech-tags">
        <view class="tech-tag" v-for="tech in techStack" :key="tech">
          <text class="tag-text">{{ tech }}</text>
        </view>
      </view>
    </view>

    <!-- 更新日志 -->
    <view class="changelog-section">
      <text class="section-title">更新日志</text>
      <view class="changelog-list">
        <view class="changelog-item" v-for="log in changelog" :key="log.version">
          <view class="log-header">
            <text class="log-version">v{{ log.version }}</text>
            <text class="log-date">{{ log.date }}</text>
          </view>
          <view class="log-content">
            <text class="log-item" v-for="item in log.changes" :key="item">• {{ item }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 联系我们 */
    <view class="contact-section">
      <text class="section-title">联系我们</text>
      <view class="contact-list">
        <view class="contact-item" @tap="copyEmail">
          <view class="contact-icon">
            <text class="icon-text">📧</text>
          </view>
          <view class="contact-content">
            <text class="contact-label">邮箱</text>
            <text class="contact-value">support@qingxudashi.com</text>
          </view>
          <view class="contact-action">
            <text class="action-text">复制</text>
          </view>
        </view>
        
        <view class="contact-item" @tap="openFeedback">
          <view class="contact-icon">
            <text class="icon-text">💬</text>
          </view>
          <view class="contact-content">
            <text class="contact-label">意见反馈</text>
            <text class="contact-value">帮助我们改进产品</text>
          </view>
          <view class="contact-action">
            <text class="action-text">反馈</text>
          </view>
        </view>
        
        <view class="contact-item" @tap="rateApp">
          <view class="contact-icon">
            <text class="icon-text">⭐</text>
          </view>
          <view class="contact-content">
            <text class="contact-label">应用评分</text>
            <text class="contact-value">给我们一个好评吧</text>
          </view>
          <view class="contact-action">
            <text class="action-text">评分</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 法律信息 -->
    <view class="legal-section">
      <text class="section-title">法律信息</text>
      <view class="legal-links">
        <view class="legal-link" @tap="showPrivacyPolicy">
          <text class="link-text">隐私政策</text>
          <text class="link-arrow">→</text>
        </view>
        <view class="legal-link" @tap="showUserAgreement">
          <text class="link-text">用户协议</text>
          <text class="link-arrow">→</text>
        </view>
        <view class="legal-link" @tap="showOpenSource">
          <text class="link-text">开源许可</text>
          <text class="link-arrow">→</text>
        </view>
      </view>
    </view>

    <!-- 版权信息 -->
    <view class="copyright-section">
      <text class="copyright-text">© 2024 情绪大师. All rights reserved.</text>
      <text class="copyright-desc">用心呵护每一份情绪</text>
    </view>

    <!-- 隐私政策弹窗 -->
    <view class="modal-overlay" v-if="showPrivacy" @tap="closeModal">
      <view class="modal-content" @tap.stop>
        <view class="modal-header">
          <text class="modal-title">隐私政策</text>
          <view class="modal-close" @tap="closeModal">
            <text class="close-icon">×</text>
          </view>
        </view>
        <scroll-view class="modal-body" scroll-y>
          <text class="policy-text">{{ privacyPolicy }}</text>
        </scroll-view>
      </view>
    </view>

    <!-- 用户协议弹窗 -->
    <view class="modal-overlay" v-if="showAgreement" @tap="closeModal">
      <view class="modal-content" @tap.stop>
        <view class="modal-header">
          <text class="modal-title">用户协议</text>
          <view class="modal-close" @tap="closeModal">
            <text class="close-icon">×</text>
          </view>
        </view>
        <scroll-view class="modal-body" scroll-y>
          <text class="policy-text">{{ userAgreement }}</text>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      appVersion: '1.0.0',
      showPrivacy: false,
      showAgreement: false,
      features: [
        {
          id: 1,
          icon: '📊',
          title: '情绪测评',
          description: '专业心理量表，科学评估情绪状态'
        },
        {
          id: 2,
          icon: '📝',
          title: '情绪记录',
          description: '记录每日心情，追踪情绪变化'
        },
        {
          id: 3,
          icon: '🧘',
          title: '冥想课程',
          description: '专业音频指导，放松身心'
        },
        {
          id: 4,
          icon: '🤖',
          title: 'AI助手',
          description: '智能情绪分析，个性化建议'
        },
        {
          id: 5,
          icon: '📈',
          title: '数据分析',
          description: '可视化图表，洞察情绪趋势'
        },
        {
          id: 6,
          icon: '🏆',
          title: '成就系统',
          description: '记录成长足迹，激励持续改善'
        }
      ],
      highlights: [
        {
          id: 1,
          icon: '🔒',
          title: '隐私保护',
          description: '本地数据存储，保护个人隐私安全'
        },
        {
          id: 2,
          icon: '📱',
          title: '离线可用',
          description: '无需网络连接，随时随地使用'
        },
        {
          id: 3,
          icon: '🎨',
          title: '治愈设计',
          description: '温暖色彩搭配，舒缓视觉体验'
        },
        {
          id: 4,
          icon: '⚡',
          title: '轻量快速',
          description: '优化性能，流畅操作体验'
        }
      ],
      techStack: [
        'Vue 3',
        'Uni-app',
        'HBuilder X',
        'JavaScript',
        'CSS3',
        'SQLite'
      ],
      changelog: [
        {
          version: '1.0.0',
          date: '2024-01-15',
          changes: [
            '首次发布，包含核心功能',
            '情绪测评系统上线',
            '情绪记录功能完善',
            '冥想课程模块发布',
            'AI情绪助手功能',
            '数据统计与分析'
          ]
        }
      ],
      privacyPolicy: `情绪大师隐私政策

最后更新：2024年1月15日

感谢您使用情绪大师应用。我们非常重视您的隐私保护，本隐私政策将向您说明我们如何收集、使用、存储和保护您的个人信息。

1. 信息收集
我们仅收集为您提供服务所必需的信息：
- 情绪记录数据（心情状态、文字记录等）
- 测评结果数据
- 应用使用统计数据
- 设备信息（用于优化应用性能）

2. 信息使用
您的信息仅用于：
- 提供个性化的情绪管理服务
- 生成情绪分析报告
- 改进应用功能和用户体验
- 提供技术支持

3. 信息存储
- 所有数据均存储在您的设备本地
- 我们不会将您的个人数据上传到服务器
- 您可以随时删除本地存储的数据

4. 信息保护
我们采取多种安全措施保护您的信息：
- 本地加密存储
- 定期安全更新
- 严格的数据访问控制

5. 您的权利
您有权：
- 查看和修改您的数据
- 删除您的所有数据
- 选择不提供某些信息

如有任何疑问，请联系我们：support@qingxudashi.com`,
      
      userAgreement: `情绪大师用户协议

最后更新：2024年1月15日

欢迎使用情绪大师应用！请仔细阅读本用户协议。

1. 服务说明
情绪大师是一款情绪管理工具，旨在帮助用户：
- 记录和分析情绪状态
- 提供心理健康测评
- 学习情绪调节技巧
- 建立健康的生活习惯

2. 用户责任
使用本应用时，您需要：
- 提供真实、准确的信息
- 合理使用应用功能
- 不得恶意破坏应用
- 遵守相关法律法规

3. 服务限制
请注意：
- 本应用不能替代专业医疗建议
- 如有严重心理问题，请及时就医
- 测评结果仅供参考

4. 知识产权
- 应用的所有内容均受版权保护
- 未经许可不得复制或传播
- 用户生成的内容归用户所有

5. 免责声明
- 我们不对使用结果承担责任
- 不保证服务不中断
- 不承担间接损失责任

6. 协议变更
我们可能会更新本协议，变更后会及时通知用户。

联系我们：support@qingxudashi.com`
    }
  },
  
  methods: {
    goBack() {
      uni.navigateBack()
    },
    
    copyEmail() {
      uni.setClipboardData({
        data: 'support@qingxudashi.com',
        success: () => {
          uni.showToast({
            title: '邮箱已复制',
            icon: 'success'
          })
        }
      })
    },
    
    openFeedback() {
      uni.showModal({
        title: '意见反馈',
        content: '感谢您的反馈！请通过邮箱 support@qingxudashi.com 联系我们，或在应用商店留下评价。',
        showCancel: false,
        confirmText: '知道了'
      })
    },
    
    rateApp() {
      uni.showModal({
        title: '应用评分',
        content: '如果您喜欢情绪大师，请在应用商店给我们一个好评，这对我们非常重要！',
        confirmText: '去评分',
        cancelText: '稍后再说',
        success: (res) => {
          if (res.confirm) {
            // 实际应用中应该跳转到应用商店
            uni.showToast({
              title: '感谢支持！',
              icon: 'success'
            })
          }
        }
      })
    },
    
    showPrivacyPolicy() {
      this.showPrivacy = true
    },
    
    showUserAgreement() {
      this.showAgreement = true
    },
    
    showOpenSource() {
      uni.showModal({
        title: '开源许可',
        content: '本应用使用了以下开源项目：\n\n• Vue.js (MIT License)\n• Uni-app (Apache License 2.0)\n• 其他依赖库\n\n感谢开源社区的贡献！',
        showCancel: false,
        confirmText: '知道了'
      })
    },
    
    closeModal() {
      this.showPrivacy = false
      this.showAgreement = false
    }
  }
}
</script>

<style scoped>
.about-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding-bottom: 40rpx;
}

/* 导航栏 */
.custom-navbar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 88rpx 40rpx 40rpx;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-back {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-back .iconfont {
  font-size: 36rpx;
}

.navbar-content {
  flex: 1;
  text-align: center;
}

.navbar-title {
  font-size: 36rpx;
  font-weight: 600;
}

.navbar-placeholder {
  width: 60rpx;
}

/* 应用信息 */
.app-info {
  text-align: center;
  padding: 60rpx 40rpx;
  background: white;
  margin: 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
}

.app-logo {
  width: 120rpx;
  height: 120rpx;
  margin: 0 auto 30rpx;
  border-radius: 24rpx;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-image {
  width: 80rpx;
  height: 80rpx;
}

.app-name {
  font-size: 48rpx;
  font-weight: 700;
  color: var(--text-primary);
  display: block;
  margin-bottom: 15rpx;
}

.app-slogan {
  font-size: 28rpx;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 20rpx;
}

.app-version {
  font-size: 24rpx;
  color: var(--text-tertiary);
  background: var(--accent-color);
  padding: 8rpx 20rpx;
  border-radius: 12rpx;
  display: inline-block;
}

/* 通用区块样式 */
.features-section,
.highlights-section,
.team-section,
.tech-section,
.changelog-section,
.contact-section,
.legal-section {
  margin: 30rpx;
  background: white;
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  margin-bottom: 30rpx;
}

/* 功能介绍 */
.features-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.feature-item {
  width: calc(50% - 10rpx);
  text-align: center;
  padding: 30rpx 20rpx;
  background: var(--accent-color);
  border-radius: 16rpx;
}

.feature-icon {
  width: 80rpx;
  height: 80rpx;
  margin: 0 auto 20rpx;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icon .icon-text {
  font-size: 36rpx;
}

.feature-title {
  font-size: 28rpx;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  margin-bottom: 10rpx;
}

.feature-desc {
  font-size: 24rpx;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* 应用特色 */
.highlights-list {
  display: flex;
  flex-direction: column;
  gap: 25rpx;
}

.highlight-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.highlight-icon {
  width: 60rpx;
  height: 60rpx;
  background: var(--accent-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.highlight-icon .icon-text {
  font-size: 28rpx;
}

.highlight-content {
  flex: 1;
}

.highlight-title {
  font-size: 28rpx;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  margin-bottom: 8rpx;
}

.highlight-desc {
  font-size: 24rpx;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* 开发团队 */
.team-info {
  text-align: center;
}

.team-member {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20rpx;
  margin-bottom: 25rpx;
}

.member-avatar {
  width: 80rpx;
  height: 80rpx;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-text {
  font-size: 32rpx;
  font-weight: 600;
  color: white;
}

.member-info {
  text-align: left;
}

.member-name {
  font-size: 28rpx;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  margin-bottom: 5rpx;
}

.member-role {
  font-size: 24rpx;
  color: var(--text-secondary);
}

.team-desc {
  font-size: 26rpx;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 技术栈 */
.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
}

.tech-tag {
  background: var(--accent-color);
  padding: 12rpx 24rpx;
  border-radius: 20rpx;
  border: 2rpx solid var(--border-color);
}

.tag-text {
  font-size: 24rpx;
  color: var(--text-primary);
}

/* 更新日志 */
.changelog-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.changelog-item {
  border-left: 4rpx solid var(--primary-color);
  padding-left: 20rpx;
}

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.log-version {
  font-size: 28rpx;
  font-weight: 600;
  color: var(--primary-color);
}

.log-date {
  font-size: 24rpx;
  color: var(--text-tertiary);
}

.log-content {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.log-item {
  font-size: 24rpx;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* 联系我们 */
.contact-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 25rpx;
  background: var(--accent-color);
  border-radius: 16rpx;
}

.contact-icon {
  width: 60rpx;
  height: 60rpx;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-icon .icon-text {
  font-size: 28rpx;
}

.contact-content {
  flex: 1;
}

.contact-label {
  font-size: 28rpx;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  margin-bottom: 5rpx;
}

.contact-value {
  font-size: 24rpx;
  color: var(--text-secondary);
}

.contact-action {
  background: var(--primary-color);
  padding: 12rpx 24rpx;
  border-radius: 12rpx;
}

.action-text {
  font-size: 24rpx;
  color: white;
  font-weight: 600;
}

/* 法律信息 */
.legal-links {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.legal-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx;
  background: var(--accent-color);
  border-radius: 16rpx;
}

.link-text {
  font-size: 28rpx;
  color: var(--text-primary);
}

.link-arrow {
  font-size: 24rpx;
  color: var(--text-tertiary);
}

/* 版权信息 */
.copyright-section {
  text-align: center;
  padding: 40rpx;
  margin: 30rpx;
}

.copyright-text {
  font-size: 24rpx;
  color: var(--text-tertiary);
  display: block;
  margin-bottom: 10rpx;
}

.copyright-desc {
  font-size: 26rpx;
  color: var(--text-secondary);
  font-style: italic;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 40rpx;
}

.modal-content {
  background: white;
  border-radius: 20rpx;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  border-bottom: 2rpx solid var(--border-color);
}

.modal-title {
  font-size: 32rpx;
  font-weight: 600;
  color: var(--text-primary);
}

.modal-close {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-icon {
  font-size: 40rpx;
  color: var(--text-tertiary);
}

.modal-body {
  flex: 1;
  padding: 30rpx 40rpx;
}

.policy-text {
  font-size: 26rpx;
  color: var(--text-secondary);
  line-height: 1.8;
  white-space: pre-line;
}
</style>